<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>

    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{
	width: 640px;height: 400px;box-shadow: 0 0 10px black;position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -320px;

	
}

    </style> 
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	
var R = 10,T = 8;
for(var i = 0;i < T;i++){
	for(var j = 0; j < R;j++){
		var oDiv = document.createElement('div');
		oDiv.style.width = div1.offsetWidth/R + 'px';
		oDiv.style.height = div1.offsetHeight/T + 'px';
		oDiv.style.float = 'left';
		oDiv.style.background='url(6876.jpg) '+div1.offsetWidth/R*-j+'px '+div1.offsetHeight/T*-i+'px'; 
		oDiv.style.transition=Math.random()*0.5+0.9+'s all ease';
		div1.appendChild(oDiv);

	}
};

var allDiv = div1.children;
setTimeout(function(){
	for(var i = 0;i < allDiv.length;i++){
		allDiv[i].style.transform = 'perspective('+((Math.random()*300)+500)+'px) rotateX('+((Math.random()*720)-360)+'deg) rotateY('+((Math.random()*720)-360)+'deg) scale('+((Math.random()*3.5)+0.75)+') translateX('+((Math.random()*360)-180)+'px) translateY('+((Math.random()*360)-180)+'px)';
		allDiv[i].style.opacity='0'
	}
},1000)





</script>
</body>
</html>